<template>
  
  <div class="app-container">
    <br>
    <br>
    <el-button type="primary" @click="addJob">添加社会职业</el-button>
    <br>
    <br>
    <el-table :data="list" style="width: 100%;margin-bottom: 20px;" row-key="id" border  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
    :default-expand-all="true" :indent=60
    >
      <el-table-column prop="name" label="社会职业名称 / 社会职称名称"  width="350" ></el-table-column>
      <el-table-column label="操作" width="260" align="center">
        <template slot-scope="scope" >
          <div style="display: flex;flex-direction: row;justify-content: right;padding-left: 10px;padding-right: 15px;">
            <el-button type="primary" v-if="scope.row.level === 1"  @click="addTitle(scope.row)" size="small">添加子项</el-button>
            <el-button type="success"  @click="update(scope.row)" size="small">修改</el-button>
            <el-button type="danger" @click="deleteInfo(scope)" size="small">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="jobTitle" :visible.sync="jobVisible" :closeOnClickModal="false">
        <h2>社会职业信息</h2>
        <el-form ref="form" :model="jobForm" label-width="120px" :rules="formRules">
          <el-form-item label="社会职业名称" prop="name">
              <el-input v-model="jobForm.name" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="confirm(jobForm)">确 定</el-button>
            <div style="width:200px;display: inline-block;"> </div>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
    </el-dialog>
    
    <el-dialog :title="jobTitleTitle" :visible.sync="jobTitleVisible" :closeOnClickModal="false">
        <h2>社会职称信息</h2>
        <el-form ref="form" :model="jobTitleForm" label-width="120px" :rules="formRules">
          <el-form-item v-if="false" label="社会职业">
            <el-input v-model="jobTitleForm.pid" :disabled="true" />
          </el-form-item>
          <el-form-item label="社会职称名称" prop="name">
              <el-input v-model="jobTitleForm.name" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="confirm(jobTitleForm)">确 定</el-button>
            <div style="width:200px;display: inline-block;"> </div>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
    </el-dialog>
  </div>
</template>

<script>
let id = 1000;
import { treeList, add, edit, del} from '@/api/job'
import { getList as getJobTitleList, getTreeList as jobTtitleTreeList, add as addJobTitle, edit as editJobTitle, del as delJobTitle} from '@/api/jobTitle'

export default {
  name: "Job",
  filters: {
    
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) callback(new Error('请输入名称')) 
      else callback()
    }
    return {
      list: null,
      listLoading: true,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      curIndex: -1,
      jobForm: {},
      jobTitleForm: {},
      formRules: {
        name: [{ required: true, trigger: 'blur', validator: validateName }],
      },
      jobVisible: false,
      jobTitleVisible: false,
      jobTitle: '',
      jobTitleTitle: '',
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      treeList().then(treeRes=> {
        console.log("treeRes", treeRes)
        this.list = treeRes.data
        this.listLoading = false
      }).catch(err=>{
        console.log("err")
        console.log(err)
      })
    },
    addJob() {
      this.reset()
      this.jobTitle = '添加社会职业'
      this.jobForm = {
        level: 1,
      }
      this.jobVisible = true
    },
    addTitle(row) {
      this.reset()
      this.jobTitleForm = {
        level: 2,
        jobId: row.id
      }
      this.jobTitleTitle = '添加社会职称'
      this.jobTitleVisible = true
    },
    update(row) {
      if(row.level === 1) {
        this.jobTitle = '修改社会职业'
        this.jobForm = JSON.parse(JSON.stringify(row))
        this.jobVisible = true
      } else if (row.level === 2) {
        this.jobTitleTitle = '修改社会职称'
        this.jobTitleForm = JSON.parse(JSON.stringify(row))
        this.jobTitleVisible = true
      }
    },
    confirm(form) {
      console.log(form)
      this.$refs.form.validate(valid => {
        if (valid) {
          if(form.level === 1) {
            if(form.id) {  // update
              edit(form).then(res=>{
                console.log(res)
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.jobVisible = false
                this.jobTitleVisible = false
                this.listLoading = false
                this.$tab.refreshPage({path: '/user/job', name: "Job"});
              }).catch(err=>{
                console.log(err)
              })
            } else {
              add(form).then(res=>{
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.jobVisible = false
                this.jobTitleVisible = false
                this.listLoading = false
                this.$tab.refreshPage({path: '/user/job', name: "Job"});
              }).catch(err=>{
                console.log(err)
              })
            }
          } else if(form.level === 2) {
            if(form.id) {  // update
              editJobTitle(form).then(res=>{
                console.log(res)
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.jobVisible = false
                this.jobTitleVisible = false
                this.listLoading = false
                this.$tab.refreshPage({path: '/user/job', name: "Job"});
              }).catch(err=>{
                console.log(err)
              })
            } else {
              addJobTitle(form).then(res=> {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.jobVisible = false
                this.jobTitleVisible = false
                this.listLoading = false
                this.$tab.refreshPage({path: '/user/job', name: "Job"});
              })
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
      
    },
    cancel() {
      console.log(this.form)
      this.jobVisible = false
      this.jobTitleVisible = false
    },
    reset(){
      this.jobForm = {}
      this.jobTitleForm = {}
    },
    deleteInfo(scope) {
      console.log(scope.row)
      this.$confirm('确定删除该'+ (scope.row.level===1?'社会职业':'社会职称') +'?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(scope.row.level === 1) {
          del(scope.row.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.$tab.refreshPage({path: '/user/job', name: "Job"});
          }).catch(err=>{
            console.log(err)
          })
        } else if (scope.row.level === 2) {
          delJobTitle(scope.row.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.$tab.refreshPage({path: '/user/job', name: "Job"});
          }).catch(err=>{
            console.log(err)
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
  }
}
</script>
